<template>
  <div
    class="_flex-y _p20 _flex-a-stretch _background-an1 _wrapper _flex-start"
  >
    <div class="_cart _p5 _flex _flex-space-x">
      <div class="_font-title">设备中心</div>
      <div class="_flex-item-1">
        <el-input
          v-model="queryStr"
          placeholder="请输入查询关键字"
          size="small"
          @keydown.enter="initScene()"
        />
      </div>
      <el-button type="primary" @click="initScene()" size="small"
        >查询</el-button
      >
      <el-button type="primary" @click="opensyncCom({})" size="small"
        >添加</el-button
      >
    </div>
    <div
      class="_flex _flex-wrap _m-t-5 _flex-center _wrapper _box-scroll _over-scroll-hidden"
    >
      <div
        class="_cart _p5 _m-r-5 _m-b-5"
        style="width: 200px"
        v-for="item in sceneList"
        :key="item.id"
      >
        <div
          class="_font-title _line _font-red"
          :class="{ '_font-green': item.status != 0 }"
        >
          {{ item.name || "--" }}
        </div>
        <div class="_font">{{ $tool.dateStr(item.created_date) }}</div>
        <div class="_flex _m-t-5">
          <el-button type="primary" size="small" @click="openViewScene(item)"
            >详情</el-button
          >
          <el-button type="warning" size="small" @click="opensyncCom(item)"
            >编辑</el-button
          >
          <el-button type="danger" size="small" @click="delScene(item.id)"
            >删除</el-button
          >
        </div>
      </div>
    </div>
    <ComDataUpdateDrawer
      ref="ComDataUpdateDrawer"
      code="things_device"
      :currentForm="syncCom"
      @syncClose="initScene"
    />
    <el-drawer
      v-model="drawerView"
      size="80%"
      :title="syncCom.name"
      :with-header="false"
    >
      <ComIotDeviceView
        v-if="syncCom.id"
        :deviceId="syncCom.id"
      ></ComIotDeviceView>
    </el-drawer>
  </div>
</template>
<script>
import toolAction from "@/tool/http/tool-action";
import ComDataUpdateDrawer from "@/views/common/com-data-update-drawer.vue";
import ComIotDeviceView from "./com-iot-device-view.vue";

let thingsSceneApi = toolAction.init("things_device");

export default {
  components: { ComDataUpdateDrawer, ComIotDeviceView },
  data() {
    return {
      sceneList: [],
      syncCom: {},
      drawerView: false,
      queryStr: "",
    };
  },
  mounted() {
    this.initScene();
  },
  methods: {
    initScene() {
      let rules = {};
      if (this.queryStr) {
        rules.name__like = this.queryStr;
      }
      thingsSceneApi.list({ rules }).then((res) => {
        this.sceneList = res;
      });
    },
    openViewScene(syncCom) {
      this.syncCom = {};
      this.$nextTick(() => {
        this.syncCom = syncCom;
        this.drawerView = true;
      });
    },
    opensyncCom(syncCom) {
      this.syncCom = syncCom;
      this.$refs.ComDataUpdateDrawer.open();
    },
    delScene(id) {
      thingsSceneApi.remove({ id }).then(() => {
        this.$element.msg();
        this.initScene();
      });
    },
  },
};
</script>
<style lang=""></style>
